<script setup>
import { ElEmpty, ElTooltip } from "element-plus";
import { useRouter } from "vue-router";

const props = defineProps({
  deviceList: Array,
  quickNavList: Array,
  loading: Boolean,
});
const emit = defineEmits(["changeView"]);
const changeView = (item) => {
  emit("changeView", item);
};
const router = useRouter();
const to_info = (item) => {
  router.push({
    name: "AirportdeploymentDetail",
    query: { id: item.id },
  });
};
</script>
<template>
  <div class="airportlist-page">
    <div class="corner-lb"></div>
    <div class="corner-rb"></div>
    <h3 class="control-management-title">
      在线机场
      <img class="icon" src="../../../../../assets/leftbg10.png" alt="" />
    </h3>
    <div class="device-list-box" v-loading="loading" element-loading-background="#02272b">
      <div class="device-list" v-for="(item, index) in deviceList" :key="index" @click="to_info(item)">
        <div class="device-left">
          <img class="device-img" src="../../../../../assets/airport.png" />
        </div>
        <div class="device-right">
          <p class="device-text device-text-title">
            <ElTooltip class="box-item" raw-content effect="dark" :disabled="item.airportName.length < 6"
              :content="item.airportName" placement="top">
              <template #content>
                <div style="width: 10vw;">{{ item.airportName }}</div>
              </template>
              <div class="span">{{ item.airportName }}</div>
            </ElTooltip>
          </p>
          <p class="device-text" v-show="item.description">
            {{ item.description }}
          </p>
          <!-- <p class="device-text">
            {{ item.status }}
          </p> -->
        </div>
      </div>
      <div v-if="deviceList && deviceList.length < 1">
        <ElEmpty description="暂无数据" :image="' '" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.airportlist-page {
  width: 100%;
  height: 100%;
  background-color: rgb(2 19 20 / 58.8%);
  // overflow-y: auto;
  position: relative;

  // &::before {
  //   content: "";
  //   position: absolute;
  //   top: 0px;
  //   left: 0px;
  //   width: 22px;
  //   height: 22px;
  //   border-top: 1px solid #24e5f1;
  //   opacity: 0.4;
  // }

  // &::after {
  //   content: "";
  //   position: absolute;
  //   top: -1px;
  //   right: -1px;
  //   width: 22px;
  //   height: 22px;
  //   border-top: 1px solid #24e5f1;
  //   opacity: 0.4;
  // }

  .corner-lb {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 3vh;
    height: 3vh;
    border-bottom: 0.01vh solid #24e5f1;
    border-left: 0.01vh solid #24e5f1;
    opacity: 0.4;
  }

  .corner-rb {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 3vh;
    height: 3vh;
    border-bottom: 0.01vh solid #24e5f1;
    border-right: 0.01vh solid #24e5f1;
    opacity: 0.4;
  }

  .control-management-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4vh;
    padding-left: 1.5vh;
    margin: 0;
    font-size: 2vh;
    font-style: normal;
    font-weight: 500;
    color: #fffefe;
    text-align: left;
    text-transform: none;
    user-select: none;
    background: radial-gradient(ellipse 140% 300% at 100% 50%,
        #023337 28%,
        #00b8bb 100%);

    .icon {
      width: 3vh;
      margin-right: 1vw;
    }
  }

  .device-list-box {
    height: calc(100% - 40px);
    padding: 10px;
    overflow-y: auto;
    user-select: none;

    .device-list {
      display: flex;
      align-items: center;
      padding: 5px 5px 10px;
      // margin-bottom: 10px;
      text-align: center;
      cursor: pointer;
      user-select: none;
      background-image: url("../../../../../assets/jcbs_jc_bg.png");
      background-size: 100% 100%;
      // border: 1px solid #fff;

      .device-left {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140px;
        height: 150px;

        .device-img {
          width: 90px;
          user-select: none;
          -webkit-user-drag: none;
        }

        .device-status {
          font-size: 12px;
          color: #7fce24;
        }
      }

      .device-right {
        width: 180px;
        padding-left: 20px;
        font-size: 12px;

        .device-text {
          width: 100%;
          height: 3.5vh;
          display: flex;
          align-items: center;
          padding-left: 1vh;
          margin-top: 1vh;
          font-size: 1.5vh;
          background-image: url("../../../../../assets/jcbs_jc_text_bg.png");
          background-size: 100% 100%;
        }

        .device-text-title {
          width: 100%;
          margin: 0;
          font-size: 2vh;
          display: -webkit-box;

          .span {
            width: 100%;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        // .device-icon {
        //   width: 25px;
        //   height: 25px;
        //   margin-right: 10px;
        // }

        // .device-model {
        //   display: flex;
        //   align-items: center;
        //   margin: 5px 0 15px;
        //   font-size: 16px;
        // }

        // .device-name {
        //   margin-bottom: 15px;
        //   font-size: 12px;
        // }

        // .device-time {
        //   margin-top: 20px;
        // }
      }
    }
  }
}
</style>
